<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1, maximum-scale=1">
    <!-- nes_btn样式文件 -->
    <link rel="stylesheet" href="./css/nes_btn.css">
    <!-- 该页面样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <title>NES网页模拟器</title>
</head>
<body>
    <div id="wrap" class="transverse">
        <div class="title">
            <a href="./index.html" id="home">回到首页</a>
            <span id="name">热血格斗</span>
        </div>
        <div id="show_box">
            <h3 id="btn_load">点此加载游戏</h3>
            <canvas id="nes-canvas" width="256" height="240" />
        </div>
         <!-- 摇杆容器 -->
        <div id="direction"></div>
        <!-- 按键容器 -->
        <div id="user_btn_box"></div>
    </div>
</body>
</html>
<!-- 模拟器 -->
<script src="./js/jsnes.min.js"></script>
<script src="./js/nes-embed.js"></script>
<!-- nes_btn插件 -->
<script src="./js/nes_btn.js"></script>
<!-- 摇杆插件 -->
<script src="./js/nipplejs.min.js"></script>
<script src="./js/joystick.js"></script>
<!-- axios -->
<script src="./lib/axios.min.js"></script>
<script>
    //获取屏幕宽度(包含浏览器地址栏)
    //var device_w = window.screen.width
    // alert(device_w)
    // alert(document.documentElement.clientWidth)
    // alert(document.documentElement.clientHeight)
    //容器应该适应高度
    //var canvas_box_width = device_w - 21 //减去

    var gameInfo = null //全局保存游戏信息

    //获取游戏列表，并init页面
    getGameList(pageInit)

    window.onload = function(){
        
        //禁止双击缩放
        document.addEventListener('dblclick',function(e){
            e.preventDefault()
        })

        //监听加载按钮
        document.querySelector('#btn_load').onclick = function(){
            //如果游戏信息为空 则return
            if(!gameInfo) return
            //fullScreen(document.querySelector('#wrap'))
            //加载游戏
            nes_load_url("nes-canvas", "./roms/" + gameInfo.rom_url)
            //隐藏加载按钮
            this.style.display = 'none'
        }

        //实例化NES按钮
        var nesBtn = new VirtualNesBtn({
            el:"#user_btn_box", //容器
            btn_down_fn:(event) => {keyboard(nes.buttonDown, event)},//虚拟按钮按下时的回调 参数evt
            btn_up_fn:(event) => {keyboard(nes.buttonUp, event)},//虚拟按钮弹起时的回调 参数evt
            keyCodes:[32,13,74,75] //按顺序分别是 select start b a
        })

        //NES按钮实例初始化
        nesBtn.init()
    }

    //初次加载判断横竖屏
    handleDirection()

    //监听横竖屏切换
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", handleDirection, false);

    //获取游戏信息
    function getGameList(cb){ //异步操作
        axios.get('./game_list.json').then(function(res){
            cb && cb(res.data)
        }).catch(function(err){
            console.log(err)
        })
    }

    function pageInit(gameList){
        //获取id
        var id = location.search.substring(4) || 1  //index就是id-1
        //获取游戏信息
        gameInfo = gameList[id-1]
        //展示游戏名称
        document.querySelector('#name').innerHTML = gameInfo.name

        //根据游戏信息配置摇杆
        var isFourBtn = gameInfo.isFourBtn
        var color = isFourBtn ? 'lightcoral':'royalblue'

        //实例化摇杆 摇杆配置依赖游戏信息
        var joystick = new Joystick({
            el:"#direction",//容器
            color:color,//摇杆颜色
            size:120,//摇杆大小
            isFourBtn:isFourBtn,//8键模式
            keyCodes:[87, 83, 65, 68],//绑定 上下左右 到 WSAD键
            rotate:0,//页面强制横屏时使用90
            btn_down_fn:(event) => {keyboard(nes.buttonDown, event)},//按下时的回调
            btn_up_fn:(event) => {keyboard(nes.buttonUp, event)},//释放时的回调
        })
        joystick.init()
    }

    //判断手机的横竖屏状态
    function handleDirection() {
        //alert(0)
        if (window.orientation == 180 || window.orientation == 0) {
            //竖屏状态
            setClass('normal')
        }
        if (window.orientation == 90 || window.orientation == -90) {
            //横屏状态
            setClass('transverse')
        }
    }

    //根据手机屏幕方向设置class类
    function setClass(direction){
        var wrap = document.querySelector("#wrap")
        if(direction === 'normal'){
            //竖屏状态
            wrap.setAttribute('class','normal')
        }else{
            //横屏状态
            wrap.setAttribute('class','transverse')
        }
    }

    // 封装进入全屏的函数
    function fullScreen(node){
        // 判断浏览器是否支持全屏api
        if(document.fullscreenEnabled || document.msFullscreenEnabled){
            // 判断是标准浏览器还是IE
            if(node.requestFullscreen){
                // chrome和火狐
                node.requestFullscreen()
            }else if(node.msRequestFullscreen){
                // IE11
                node.msRequestFullscreen()
            }
        }else{
            console.log("当前浏览器不支持全屏模式")
        }
    }

    // 封装退出全屏的函数（直接esc键最简单）
    function exitfullScreen(){
        //判断是否已经进入全屏模式
        var fullscreenElement = document.fullscreenElement || document.msFullscreenElement
        if(!fullscreenElement){
            //console.log("不是全屏状态")
            return
        }
        // 确保在非全屏状态才调用下面的代码，不然会弹警告
        if(document.exitFullscreen){
            //标准浏览器
            document.exitFullscreen()
        }else if(document.msExitFullscreen){
            //IE浏览器
            document.msExitFullscreen()
        }
    }
</script>